<template>
  <view>
   <p-navbar ></p-navbar>
    <view class="title">
      <view>{{type=='0'?'修改登录密码':'忘记密码'}}</view>
    </view>
    <view class="form">
      <view class="item" v-for="(item, index) in node" :key="item.key">
        <view class="label" :class="[`icon-${item.icon}`]">{{ item.label }}</view>
        <view class="content">
          <input
            class="input"
            :placeholder="item.msg"
            :maxlength="item.len"
            :type="item.type"
            v-model="form[item.key]"
            @keyup.enter="fnForget"
          />
          <view
            class="password"
            :class="{ show: item.type === 'text' }"
            v-if="item.icon === 'password'"
            @tap="fnPsw(index)"
          ></view>
		  <view
		    class="code"
		    :class="{ disabled: !codeClick }"
		    v-if="item.key === 'sms_code'"
		    @tap="getMsmCode"
		    >{{ codeText }}</view
		  >
        </view>
      </view>
    </view>
    <view class="submit">
      <u-button
        type="primary"
        ripple
		:loading="loading"
        shape="circle"
        @tap="fnForget"
		:style="{'background':disabled?'#F3C31B':''}"
        >确认修改</u-button
      >
    </view>
  </view>
</template>

<script>
import { getCode } from '@/utils/mixins'
export default {
  data() {
    return {
      node: [
		  {
		    key: 'password',
		    label: '原密码',
		    msg: '请输入原密码',
		    icon: 'password',
		    type: 'password',
		    len: 20
		  },
        {
          key: 'passwords',
          label: '新密码',
          msg: '请设置新密码',
          icon: 'password',
          type: 'password',
          len: 20
        },
        {
          key: 'p_password',
          label: '确认新密码',
          msg: '请确认新密码',
          icon: 'password',
          type: 'password',
          len: 20
        }
      ],
	  nodes:[
		  {
		    key: 'phone',
		    label: '手机号码',
		    msg: '请输入手机号码',
		    icon: 'phone',
		    type: 'text',
		    len: 20
		  },
		  {
		    key: 'sms_code',
		    label: '验证码',
		    msg: '请输入手机短信验证码',
		    icon: 'code',
		    type: 'text',
		    len: 6
		  },
		  {
		    key: 'userName',
		    label: '账号',
		    msg: '请输入账号',
		    icon: 'userName',
		    type: 'text',
		    len: 20
		  },
	  ],
      form: {}, // 表单内容
      showPsw: false, // 是否显示密码
      loading: false, // 注册加载中
	  type:'',//内外部判断
    }
  },
  mixins: [getCode],
  watch: {
    showPsw(val) {
      const type = val ? 'text' : 'password'
      this.$set(this.node[1], 'type', type)
    }
  },
  computed: {
    // 注册按钮是否禁止点击
    disabled() {
     for (let i = 0; i < this.mustNode.length; i++) {
     	const ele = this.mustNode[i]
     	if (!this.form[ele.key]) return false
     }
     return true
      
    },
	mustNode() {
		return this.node
	}
  },
  onLoad(options) {
  	  this.type=options.type
	  this.node.splice(0,1)
	  this.node=[...this.nodes,...this.node]
  },
  methods: {
	  getMsmCode() {//验证码
	    if (!this.codeClick) return ;
		console.log(this.form.phone)
		if(!this.form.phone) return this.util.toast('请输入手机号码');
		if(!this.$u.test.mobile(this.form.phone)) return this.util.toast('请输入正确的手机号码');
		this.getCode(this.form.phone,2)
	  	this.loading = false
	  },
    // 忘记密码
    fnForget() {
		console.log(this.disabled , this.loading)
		if (!this.disabled || this.loading) return
		if (this.form.passwords !== this.form.p_password) return this.util.toast('两次密码不一致')
		this.loading = true
		let mothds=this.type=='1'?'forgetPwd':'restpwd'
		this.request.post(mothds, {
			authCode:this.form.sms_code,
			newpwd: this.form.passwords,
			phone:this.form.phone,
			userName:this.form.userName,
		}).then(res => {
			if (res.data.code === 1) {
				this.util.toast('修改密码成功', 'success')
				setTimeout(() => {
				 uni.navigateBack({
					delta:1,
				 })
				}, 1000)
			  }else{
				this.util.toast(res.data.msg)	
			  }
			  this.loading = false
			})
			.catch(err => {
			  this.loading = false
			})
    },
    // 显示或隐藏密码
    fnPsw(i) {
      const type = this.node[i].type
      this.$set(this.node[i], 'type', type === 'password' ? 'text' : 'password')
    }
  }
}
</script>

<style lang="scss">
.title {
	padding: 20rpx 60rpx 10rpx 60rpx;
	view:nth-child(1) {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}
.form {
	padding: 0 40rpx;
}
.item {
	// border-bottom: 2rpx solid rgba(22, 119, 255, 0.05);
	padding-top: 40rpx;
	.content {
		@include flex;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.label {
		margin-bottom: 20rpx;
		height: 40rpx;
		font-size: 28rpx;
		padding-left: 20rpx;
		background-size: 36rpx 40rpx;
		background-position: 0 center;
		background-repeat: no-repeat;
		line-height: 40rpx;
		$icon: phone password code invite;
		@each $c in $icon {
			&.icon-#{$c} {
				// background-image: url("~@/static/login-icon-#{$c}.png");
			}
		}
	}
	.input {
		font-size: 25rpx;
		height: 90rpx;
		padding: 0 30rpx 0 20rpx;
		flex: 1;
		background: none;
		border: none;
		outline: none;
		// color: #fff;
	}
	.password {
		width: 32rpx;
		height: 16rpx;
		background-image: url("~@/static/user/login-psw-hide.png");
		@include background;
		margin-right: 50rpx;
		@include click;
		&.show {
			height: 24rpx;
			background-image: url("~@/static/user/login-psw-show.png");
		}
	}
	.code {
		font-size: 24rpx;
		color: $light-color;
		margin-right: 50rpx;
		@include click;
		&.disabled {
			// color: #fff;
		}
	}
}
.submit {
	margin: 90rpx 64rpx;
	/deep/ .u-btn {
		background-color: rgba( #e0e0e0,1);
		// box-shadow: 0 17rpx 40rpx rgba(38, 109, 245, .3);
		transition: .3s;
		height: 90rpx;
		border-radius: 20rpx;
		// border-radius: 10rpx;
		&[disabled] {
			
			box-shadow: none !important;
			background-color: $light-color !important;
		}
		/deep/ .u-round-circle::after {
		    /* border-radius: 50px; */
		   border-radius: 20rpx;
		}
	}
	/deep/ .u-round-circle::after {
	   border-radius: 20rpx;
	}
}
.agreement {
	margin-top: 50rpx;
	padding-bottom: 60rpx;
	text-align: center;
	font-size: 24rpx;
	color: #fff;
	text {
		color: #266DF5;
	}
}
</style>
